<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地址选择组件 - 城市级</title>
    <!-- <link rel="stylesheet" href="http://t.weikuw.com/Public/Wap/Promote/css/group_profiles.css"> -->
    <link rel="stylesheet" href="http://t.weikuw.com/Public/Wap/Promote/css/vant.min.css">
    <style>
        .city_page{ width: 100%; height: 100%; padding-top: 54px; font-size:14px; background: #f8f8f8; overflow-y: auto;}
        .city_page .topbox{ display: flex; width: 100%; padding-left: 10px; background-color: #fff; align-items: center;}
        .city_page .topbox .van-search{ flex: 1 1 0; overflow: hidden;}
        .city_page .nowand{ width: 100%; padding: 10px 5px 0 15px;}
        .city_page .nowand h3{ color: #999; font-size: 14px; line-height: 1.8; margin-bottom: 5px;}
        .city_page .nowand .pbox{ display: flex; flex-wrap: wrap;}
        .city_page .nowand .pbox p{ display: flex; align-items: center; background: #fff; border: 1px solid #eee; border-radius: 4px; padding: 0 15px; line-height: 30px; margin: 0 10px 8px 0;}
        .city_page .p_warn{ line-height:35px; text-align:center; color:#999;}

        .left_slide{ position: fixed; top: 0; right: -100%; z-index: 999; opacity: 0; transition: all .3s;}
        .left_slide.show{ right: 0; opacity: 1;}
        .city_page .search_list{ width:100%; position:fixed; top:54px; left:0; bottom:0; z-index:9; background-color:#FFF; border-top:1px solid #EEE;}

        .city_page .van-search__content{ background-color: #f8f8f8;}
        .city_page .van-index-anchor--sticky{ top: 54px; background-color: #f8f8f8;}
        .city_page .van-index-bar__sidebar{ right: -100%;}
        .city_page.show .van-index-bar__sidebar{ right:0;}
    </style>
</head>
<body>
    <div id="app">
        <van-button type="info" @click="showCity = true">重新定位</van-button>

        <!-- <van-overlay :show="showCity" @click="showCity = false" z-index="998"></van-overlay> -->
        <div class="city_page left_slide" :class="{'show': showCity}">
            <!-- 顶部搜索 -->
            <div class="topbox left_slide" :class="{'show': showCity}">
                <van-icon name="arrow-left" size="18" @click="quit"></van-icon>
                <van-search v-model="search" placeholder="城市/拼音" @input="searchData"></van-search>
            </div>
            <!-- 当前所选城市 -->
            <van-collapse v-model="areaSelect" v-if="accurate">
                <van-collapse-item :title="'您正在看：' + currentCity" name="area" value="选择区县" :is-link="true">区县选择还未完善，敬请期待！</van-collapse-item>
            </van-collapse>
            <van-cell-group v-else><van-cell :title="'您正在看：' + currentCity"></van-cell></van-cell-group>
            <!-- 城市列表 -->
            <van-index-bar :index-list="indexList" highlight-color="#FE5357">
                <div class="nowand">
                    <h3>定位</h3>
                    <div class="pbox">
                        <p style="padding-left:7px;" v-if="location && location != 'load'">
                            <van-icon name="location" size="16" color="#FE5357" ></van-icon>
                            <span style="margin-left:4px;" @click="checkCity(location)">{{location}}</span>
                        </p>
                        <template v-else>
                            <p v-show="location != 'load'">
                                <span style="margin-right:4px; color:#FF8760;" @click="geolocation">定位失败，点击重试</span>
                                <van-icon name="replay" size="16" color="#FF8760" ></van-icon>
                            </p>
                            <p v-show="location == 'load'">
                                <van-loading type="spinner" size="16" color="#FF8760" ></van-loading>
                                <span style="margin-left:4px; color:#FF8760;">正在定位</span>
                            </p>
                        </template>
                    </div>
                    <h3>最近访问</h3>
                    <div class="pbox">
                        <p v-for="city in lately" @click="checkCity(city)">{{city}}</p>
                        <div class="p_warn" v-if="lately.length <= 0">当前无最近访问内容</div>
                    </div>
                </div>
                <template v-for="(group, idx) in alphabetCity">
                    <van-index-anchor :index="idx" ></van-index-anchor>
                    <template v-for="item in group">
                        <van-cell :title="item.text" @click="checkCity(item.text)"></van-cell>
                    </template>
                </template>
            </van-index-bar>
            <!-- 搜索结果 -->
            <div class="search_list" v-show="search">
                <template v-for="item in searchList">
                    <van-cell :title="item.text" @click="checkCity(item.text)"></van-cell>
                </template>
            </div>
        </div>
    </div>


<script src="http://t.weikuw.com/Public/Wap/Promote/js/vue.min.js"></script>
<script src="http://t.weikuw.com/Public/Wap/Promote/js/vant.min.js"></script>
<script src="http://t.weikuw.com/Public/Wap/Promote/js/alphabetCity.js"></script>
<script src="https://webapi.amap.com/loader.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data(){
            return {
                showCity: true,         //打开地址选择组件
                currentCity: '长沙市',  //当前所选城市
                location: '',           //当前定位城市
                accurate: false,        //开启区县选择
                areaSelect: [],         
                lately: [],             //"最近访问" 数据
                alphabetCity: {},       //城市列表
                search: '',             //搜索的内容
                searchList: [],         //搜索的结果数据
                indexList: []           //索引数据列表[A-Z]
            }
        },
        created(){
            this.alphabetCity = Object.assign({}, alphabetCity);
            this.initLatelyCity();
            // this.geolocation();

            for(let i in this.alphabetCity){
                this.indexList.push(i);
            }
        },
        methods: {
            checkCity(city){
                this.currentCity = city;
                this.initLatelyCity(city);
                this.quit();
            },
            geolocation(){
                let _this = this;
                this.location = 'load';
                AMapLoader.load({
                    "key": "b197935c5f65c12c9e1d2b8b4035e475",
                    "version": "1.4.15",
                    "plugins": ['AMap.CitySearch', 'AMap.Geolocation'],
                }).then(AMap => {
                    var citySearch = new AMap.CitySearch();
                    citySearch.getLocalCity(function (status, result) {
                        if (status === 'complete' && result.info === 'OK') {
                            // 查询成功，result即为当前所在城市信息
                            console.log('geolocation:', result);
                            _this.location = result.city;
                            _this.initLatelyCity(result.city);
                            return false;
                        }
                        _this.location = '';
                    })
                })
            },
            initLatelyCity(city){
                let commonCity = localStorage.getItem('commonCity') || '',
                    newComCity = commonCity ? commonCity.split(',') : [];
                if(city){
                    if(newComCity.indexOf(city) != -1) newComCity.splice(newComCity.indexOf(city), 1);
                    newComCity.unshift(city);
                    newComCity = newComCity.slice(0, 5);
                    localStorage.setItem('alpCity', city);
                    localStorage.setItem('commonCity', newComCity.join(','));
                }
                this.lately = Object.assign([], newComCity);
            },
            searchData(){
                let alphabet = /^[a-zA-Z]*$/.test(this.search),
                    search = alphabet ? this.search.toLowerCase() : this.search;
                this.searchList = [];
                for(var alp in this.alphabetCity){
                    let data = this.alphabetCity[alp];
                    data.map(item => {
                        let text = alphabet ? item.pinyin.split(' ').join('') : item.text;
                        if(text.indexOf(search) != -1) this.searchList.push(item);
                    })
                }
            },
            quit(){
                this.search = '';
                this.showCity = false;
            }
        }
    })
</script>
</body>
</html>